<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>My Resum</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <script type="text/javascript" src="../js/jquery-2.1.4.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../css/main.css" type="text/css">
  <!--  <script src="../js/jquery.backstretch.min.js"></script>-->
   <!-- <script src="../js/custom.js"></script>-->
    <script>
        $(function () {
            var i = 0;
            setInterval(function(){
                if(i==3){
                    i=0;
                }
                if(i==0){
                    $('body').css('backgroundImage','url("../img/tm-bg-slide-1.jpg")') ;
                }else if(i==1){
                    $('body').css('backgroundImage','url("../img/tm-bg-slide-2.jpg")') ;
                }else{
                    $('body').css('backgroundImage','url("../img/tm-bg-slide-3.jpg")') ;
                }

                i++;
            },2000);

        });
    </script>
    <!--页面加载事件-->
  <!-- <script>
        $(function (e) {
                $('body').button('loading');
        });
    </script>-->
</head>
<!--<body data-loading-text="正在加载。。。" >-->
<body>
<!--<button data-loading-text="正在加载中。。。。" class="btn"> anjkjs</button>-->
<div class="container">
    <div class="text-center ">
        <img src="../img/tm-easy-profile.jpg" class="img-circle img-thumbnail">
        <hr style="width: 8%">
        <h1>Hi,I am Julia</h1>

        <h1>Creative Director</h1>
    </div>
</div>
<div class="container pad ">
    <div class="row ">
        <div class="col-md-6 col-sm-12">
            <div class="content1">
                <h3>Easy Profile</h3>

                <h2>Bootstrap v3.3.5</h2><br>

                <p>This easy HTML profile is brought to you by templatemo website. There are 4 color themes, <a
                        href="#">Green</a>,
                    <a href="#">Blue</a>, <a href="#">Gray</a>, and <a href="#">Orange</a>. Sed vitae dui in neque
                    elementum
                    tempor eu id risus. Phasellus sed facilisis lacus, et venenatis augue.</p>
            </div>
        </div>
        <div class="col-md-6 col-sm-12">
            <div class="content2">
                <h2>Skills</h2><br>
                <strong>PHP MySQL</strong><span class="pull-right">70%</span>

                <div class="progress"  style="height: 10px">
                    <div class="progress-bar " aria-valuenow="70" aria-valuemin="0" aria-valuemax="100"
                         style="width: 70%">
                    </div>
                </div>
                <strong>UI/UX Design</strong><span class="pull-right">85%</span>

                <div class="progress" style="height: 10px">
                    <div class="progress-bar" aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"
                         style="width: 85%">
                    </div>
                </div>
                <strong>Bootstrap</strong><span class="pull-right">95%</span>

                <div class="progress" style="height: 10px">
                    <div class="progress-bar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100"
                         style="width: 95%">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="container pad ">
    <div class="row ">
        <div class="col-md-8 col-sm-12">
            <div class="content2">
                <h2>Education</h2><br>

                <h3>New Web Design</h3>

                <h4 class="white">School of Media&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 2030 January - 2034 December</h4>
                <span></span>

                <p class="white">In lacinia leo sed quam feugiat, ac efficitur dui tristique. Ut venenatis, odio quis
                    cursus egestas,
                    nulla sem volutpat diam, ac dapibus nisl ipsum ut ipsum. Nunc tincidunt libero non magna placerat
                    elementum.</p>
            </div>
        </div>
        <div class="col-md-4 col-sm-12">
            <div class="content1">
                <h2>Languages</h2><br>
                <ul>
                    <li>Myanmar / Thai</li>
                    <li>English / Spanish</li>
                    <li>Chinese / Japanese</li>
                    <li>Arabic / Hebrew</li>
                </ul>
            </div>

        </div>
    </div>
</div>

<div class="container pad ">
    <div class="row ">
        <div class="col-md-4 col-sm-12">
            <div class="content1">

                <h2>Contact</h2><br>
                <span class="glyphicon   glyphicon-map-marker"></span>
                123 Rama IX Road, Bangkok<br><br>
                <span class="img-circle glyphicon glyphicon-earphone"></span> 010-020-0890<br><br>
                <span class="glyphicon   glyphicon-envelope"></span>easy@company.com<br><br>
                <span class="glyphicon   glyphicon-globe"></span>www.company.com<br><br>
            </div>
        </div>
        <div class="col-md-8 col-sm-12">
            <div class="content2">
                <h2>Experiences</h2><br>

                <h3>Website Development</h3>

                <h4 class="white">New Media Company&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;2035 January - 2036 April</h4>
                <span></span>

                <p class="white">Cras porta tincidunt sem, in sollicitudin lorem efficitur ut. Lorem ipsum dolor sit
                    amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet.</p>
            </div>
        </div>
    </div>
</div>

<div id="foot">
    <h3 class="white">Copyright © 2015.Company name All rights reserved.</h3>
  <!--  <span class="glyphicon glyphicon-facebook"></span>
    <span class="glyphicon glyphicon-google-plus"> </span>-->
</div>
</body>
</html>